<!DOCTYPE html>
<html lang="en"><!-- Basic -->
<head>
	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">   
   
    <!-- Mobile Metas -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <!-- Site Metas -->
    <title>菜菜绘旺堡</title>
	<link rel="icon" th:href="@{images/logo2.png}" type="image/x-icon" >
	<link rel="icon" th:href="@{favicon.ico}" type="image/ico">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Site Icons -->
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" th:href="@{css/bootstrap.min.css}">
	<!-- Site CSS -->
    <link rel="stylesheet" th:href="@{css/style.css}">
    <!-- Responsive CSS -->
    <link rel="stylesheet" th:href="@{css/responsive.css}">
    <!-- Custom CSS -->
    <link rel="stylesheet" th:href="@{css/custom.css}">

    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
	<style>
		.dropdown {
			position: relative;
			display: inline-block;
		}
		.dropdown-content {
			display: none;
			position: absolute;
			background-color: #f9f9f9;
			min-width: 160px;
			box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
			padding: 12px 16px;
		}
		.dropdown:hover .dropdown-content {
			display: block;
		}
	</style>

</head>

<body>
<!-- Start header -->
<header class="top-navbar">
	<nav class="navbar navbar-expand-lg navbar-light bg-light">
		<div class="container">
			<a class="navbar-brand" th:href="@{/index}">
				<img style="width: 60px;" src="images/logo2.png" alt="" />
				<img style=" width: 60px; " src="images/logo4.png" alt="" />
			</a>
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbars-rs-food" aria-controls="navbars-rs-food" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="collapse navbar-collapse" id="navbars-rs-food">
				<ul class="navbar-nav ml-auto">
					<li class="nav-item"><a class="nav-link" th:href="@{/index}">首页</a></li>
					<li class="nav-item"><a class="nav-link" th:href="@{/shopping}">购物车</a></li>
					<li class="nav-item"><a class="nav-link" th:href="@{/ordering}">我的订单</a></li>
					<li class="nav-item">
						<div class="dropdown">
								<span class="nav-link">
								你好[[*{session.loginUser.telephoneNumber}]]
								</span>
							<div class="dropdown-content">
								<a  class="nav-link" th:if="${session.loginUser.role}==1" href="/bus/business_index">商家系统</a>
								<a class="nav-link" href="/logout">退出登录</a>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</nav>
</header>
	
	<!-- Start All Pages -->
	<div class="all-page-title page-breadcrumb">
		<div class="container text-center">
			<div class="row">
				<div class="col-lg-12">
					<h1>菜菜绘旺堡</h1>
				</div>
			</div>
		</div>
	</div>
	<!-- End All Pages -->

<!-- Start Menu -->
<div class="menu-box">
	<div class="container">
		<div class="row">
			<div class="col-lg-12">
				<div class="heading-title text-center">
					<h2>全部</h2>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-lg-12">
				<div class="special-menu text-center">
					<div class="button-group filter-button-group">
						<button th:class="${0==id}?'active':''" data-filter="*" >
							<a href="/index?dishCategoryId=0">全部</a>
						</button>
						<button data-filter=".staple" th:class="${dishCategory.dishCategoryId==id}?'active':''" th:each="dishCategory:${category}">
							<a th:href="@{'/index?dishCategoryId='+${dishCategory.dishCategoryId}}" th:text="${dishCategory.categoryName}"
							   th:class="${dishCategory.dishCategoryId==id}?'active':''"></a>
						</button>
					</div>
				</div>
			</div>
		</div>

		<div class="row special-list" >
			<div class="col-lg-4 col-md-6 special-grid staple" th:each="dish:${dishList}" >
				<div class="gallery-single fix">
					<img  src="images/zhimaqiu.jpeg" class="img-fluid" alt="Image"   th:src="${dish.img}"  style="width: 400px; height: 280px;">
					<div class="why-text">
						<h4 th:text="${dish.dishName}">Special Lunch 1</h4>
						<p th:text="${dish.summary}">Sed id magna vitae eros sagittis euismod.</p>
						<h5  th:text="${dish.price}"> $15.79</h5>
						<a th:href="@{'addshopping?dishId='+${dish.dishId}} ">
							<img style="width: 40px; height: 40px;  " src="images/shopping.jpg" >
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- End Menu -->
	
	<!-- Start QT -->
	<div class="qt-box qt-background">
		<div class="container">
			<div class="row">
				<div class="col-md-8 ml-auto mr-auto text-left">
					<p class="lead ">
						" If you're not the one cooking, stay out of the way and compliment the chef. "
					</p>
					<span class="lead">Michael Strahan</span>
				</div>
			</div>
		</div>
	</div>
	<!-- End QT -->

<!-- Start Contact info -->
<div class="contact-imfo-box" style="position:relative;">
	<div class="container">
		<div class="row">
			<div class="col-md-4">
				<i class="fa fa-volume-control-phone"></i>
				<div class="overflow-hidden">
					<h4>电话</h4>
					<p class="lead">
						+10086 123 2345 4567
					</p>
				</div>
			</div>
			<div class="col-md-4">
				<i class="fa fa-envelope"></i>
				<div class="overflow-hidden">
					<h4>邮件</h4>
					<p class="lead">
						caicaihuiwangbao@admin.com
					</p>
				</div>
			</div>
			<div class="col-md-4">
				<i class="fa fa-map-marker"></i>
				<div class="overflow-hidden">
					<h4>地址</h4>
					<p class="lead">
						菜菜市烩旺堡街1号
					</p>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- End Contact info -->

<!-- Start Footer -->
<footer class="footer-area bg-f">
	<div class="container">
		<div class="row">
			<div class="col-lg-3 col-md-6">
				<h3>关注</h3>
				<p>关注微信，了解最新动态</p>
				<img width="200px"; height="200px"; src="images/ma.png" alt="" />
			</div>
			<div class="col-lg-3 col-md-6">
				<h3>营业时间</h3>
				<p><span class="text-color">周一至周五 :</span> 9:00 - 22:00</p>
				<p><span class="text-color">周六:</span> 9:00 - 23:00</p>
				<p><span class="text-color">周日:</span> 9:00 - 21:00</p>
			</div>
			<div class="col-lg-3 col-md-6">
				<h3>联系我们</h3>
				<p class="lead">菜菜市烩旺堡街1号</p>
				<p class="lead"><a href="#">+10086 123 2345 4567</a></p>
				<p><a href="#"> caicaihuiwangbao@admin.com</a></p>
			</div>
			<div class="col-lg-3 col-md-6">
				<h3>Subscribe</h3>
				<div class="subscribe_form">
					<form class="subscribe_form">
						<input name="EMAIL" id="subs-email" class="form_input" placeholder="Email Address..." type="email">
						<button type="submit" class="submit">SUBSCRIBE</button>
						<div class="clearfix"></div>
					</form>
				</div>
				<ul class="list-inline f-social">
					<li class="list-inline-item"><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
					<li class="list-inline-item"><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
					<li class="list-inline-item"><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
					<li class="list-inline-item"><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
					<li class="list-inline-item"><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
				</ul>
			</div>
		</div>
	</div>

	<div class="copyright">
		<div class="container">
			<div class="row">
				<div class="col-lg-12">
					<p class="company-name">Copyright &copy; 2021.Company name All rights reserved.</p>
				</div>
			</div>
		</div>
	</div>

</footer>
<!-- End Footer -->
	
	<a href="#" id="back-to-top" title="Back to top" style="display: none;">&uarr;</a>

	<!-- ALL JS FILES -->
	<script src="js/jquery-3.2.1.min.js"></script>
	<script src="js/popper.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
    <!-- ALL PLUGINS -->
	<script src="js/jquery.superslides.min.js"></script>
	<script src="js/images-loded.min.js"></script>
	<script src="js/isotope.min.js"></script>
	<script src="js/baguetteBox.min.js"></script>
	<script src="js/form-validator.min.js"></script>
    <script src="js/contact-form-script.js"></script>
    <script src="js/custom.js"></script>
</body>
</html>